﻿
@{
    @using WebZtreeAndIcheck.Common;
    Layout = null;
    DB dbfirst = new DB();
    var list = dbfirst.FindList<DemoModel>();
}

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--bootstrap样式和JS-->

    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="~/lib/icheck/skins/icheck-1.x/skins/minimal/blue.css" rel="stylesheet" />
    <link href="~/lib/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    
    <script src="~/lib/icheck/skins/icheck-1.x/demo/js/jquery.js"></script>
    <script src="~/lib/zTree/js/jquery.ztree.core.min.js"></script>
    <script src="~/lib/zTree/js/jquery.ztree.excheck.min.js"></script>
    <script src="~/lib/zTree/js/jquery.ztree.exedit.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <!--iCheck-->
    <script src="~/lib/icheck/skins/icheck-1.x/icheck.js"></script>
    <!--Layer-->
    <script src="~/lib/layer/layer.js"></script>

    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: "/Ztree/GetZtree",
                type: "get",
                async: false,
                cache: false,
                datatype: "json",
                data: {
                    Id: 'zree'  
                },
                success: function (r) {

                    if (r.status = "1") {
                        var setting = {
                            check: {
                                enable: true, //是否展示每个节点
                                //chkboxType: { "Y": "ps", "N": "ps" }
                            },

                            view: {
                                dblClickExpand: true,    //是否展开所有
                            },
                            edit: {
                                enable: true
                            },
                            data: {
                                simpleData: {  //数据类型
                                    enable: true,
                                    idKey: "id",
                                    pIdKey: "pid",
                                    //rootPId: 0,
                                },
                                // key: { checked: 'checked' }
                            },
                            callback: {
                                // beforeExpand: zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
                            }
                        };
                        zTree = $.fn.zTree.init($("#tree"), setting, r.value);
                        zTree.expandAll(true); //展开所有
                      //  layer.msg('处理成功！更新ztree', {[icon: 16, time: 1000, shade: [0.5, '#000', true] });
                        layer.msg('处理成功！更新ztree', { icon: 16, time: 1000, shade: [0.5, '#000', true] });
                    }
                    else {

                        layer.msg('处理失败！', { icon: 16, time:100, shade: [0.5, '#000', true] });
                    
                    }
                },
                error: function (err) {    //url无效，请求失败；有Exception异常，没有捕获时。

                    layer.msg('请求无效！', { icon: 16, time: 100, shade: [0.5, '#000', true] });
                }
            });
            $('input[type=radio]').iCheck({

                checkboxClass: 'icheckbox_minimal-blue',
                radioClass: 'iradio_minimal-blue',
                increaseArea: '20%', // optional
                labelHover: true,
            });
            $('#table-roles .radio:first label').click();
        });
        var App = {

            Add: function () {

                var obj = $("#TxtContextNode").val();
                if (obj == "") { layer.msg("请输入节点信息", { time: 1000 }) }
                else {
                    //var treeObj = $.fn.ztree.getZTreeObj("tree");
                    var treeObj = $.fn.zTree.getZTreeObj("tree");

                    var parentZnode = treeObj.getSelectedNodes();//获取父节点
                    var newNode = { id: obj, pid: parentZnode.id, name: obj };

                    newNode = treeObj.addNodes(parentZnode[0], newNode, true);
                }
            },
            Delete: function () {
                var ztree = $.fn.zTree.getZTreeObj("tree");
                var nodes = ztree.getSelectedNodes();//获取删除的节点
                for (var i = 0; i < nodes.length; i++) {
                    ztree.removeNode(nodes[i])
                }

            },
            DeleteCheck: function () {
                var ztree = $.fn.zTree.getZTreeObj("tree");
                var nodes = ztree.getCheckedNodes(true);//获取删除选中的节点
                for (var i = 0; i < nodes.length; i++) {
                    ztree.removeNode(nodes[i])
                }

            },
            Update: function () {
                var ztree = $.fn.zTree.getZTreeObj("tree");
                var nodes = ztree.getSelectedNodes();//获取选中节点
                var obj = $("#TxtContextNode").val();
                if (obj == "") { layer.msg("请输入节点信息") }
                else {
                    for (var i = 0; i < nodes.length; i++) {
                        nodes[i].name = obj;
                        ztree.updateNode(nodes[i]);
                    }
                }
            }


        };
    </script>
    <style type="text/css">
        .container {
            margin: 100px auto;
            padding: 0;
            width: 100%;
            min-height: 100%;
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="row">
            <div class="text-center ">
                <h1>Ztree和Ichecked的基本使用和说明</h1>
            </div>
            <div class="col-sm-12">

                <div class="col-sm-6">


                    <div class="panel panel-primary">

                        <input type="text" id="TxtContextNode" />
                        <div class="btn-group">
                            <button class="btn btn-success" type="button" onclick="App.Add()">新增节点</button>
                            <button class="btn btn-success" type="button" onclick="App.Update()">编辑节点</button>
                            <button class="btn btn-success" type="button" onclick="App.Delete() ">删除选择</button>
                            <button class="btn btn-success" type="button" onclick="App.DeleteCheck()">删除勾选</button>
                        </div>
                        <div style="height:calc(100vh - 52px) " ;overflow-y:auto;>

                            <div>
                                <ul id="tree" class="ztree" style="font-size:20px"></ul>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-sm-6">
                    <div class="panel panel-primary">
                        <div class="panel-body" style="height:calc( 100vh - 52px); overflow-y:auto;">
                            <table class="table table-bordered table-default table-hover " id="table-roles">
                                <thead>
                                    <tr>
                                        <th>操作</th>
                                        <th>编号</th>
                                        <th>角色</th>
                                        <th>备注</th>
                                    </tr>

                                </thead>

                                <tbody>
                                    @*onclick="$(this).find('.radio label').click()"*@
                                    @foreach (var item in list)
                                    {
                                        <tr style="cursor:pointer;">
                                            <td>
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="role" value="@item.IDNumber" /> @item.Name
                                                    </label>

                                                </div>
                                            </td>
                                            <td>@item.IDNumber</td>
                                            <td>@item.Name</td>
                                            <td>@item.Remake</td>

                                        </tr>
                                    }

                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



</body>
</html>

